<template>
	<view>
		<view class="uni-status-bar"></view>
		<view class="fixed">
			<view class="top flexSpace" @click="onNative('/pages/my/personal-center/index')">
				<view class="name">
					<view class="nickname">
						<view class="names">{{userInfo.nickname}}</view>
						<view class="user-grade1 user-grade" v-if="userInfo.partner_id == 0">
							<view class="box">
								{{$t('my.user')}}
							</view>
						</view>
						<view class="" v-if="userInfo.partner_id == 1">

						</view>
						<view class="user-grade1" v-if="userInfo.partner_id == 2 || userInfo.partner_id == 3">
							<view class="box">
								{{userInfo.partner_name}}
							</view>
							<view class="pic"></view>
						</view>
					</view>
					<view class="id">ID:{{userInfo.id}}</view>
				</view>
				<view class="attr">
					<hb-head :avatar="userInfo.avatar"></hb-head>
					<image src="@/static/images/arrow-right-icon.png" mode="" class="right"></image>
				</view>
			</view>
		</view>

		<view class="card pd15">
			<view class="cardAmount">
				<view class="cardTop flexSpace">
					<view class="money" v-if="wallet.data">
						<view> {{$t('my.totalAssets')}}{{$t('my.Equivalent')}}（USDT）</view>
						<view class="num">{{Number(wallet.amount).toFixed(2)}}</view>
					</view>
					<view class="btn" @click="onNative('/pages/my/currency-subsidiary/index')">
						{{$t('my.RevenueDetails')}}
					</view>
				</view>
				<view class="aleryBanlace">
					<text>USDT :
						{{wallet.data ? Number(wallet.data['USDT'].balance_available) + Number(wallet.data['USDT'].balance_locked) : 0}}</text>
					<text>BTC :
						{{wallet.data ? Number(wallet.data['BTC'].balance_available) + Number(wallet.data['BTC'].balance_locked) : 0}}</text>
				</view>
				<view class="flex-r">
					<view class="btn" @click="onNative('/pages/my/charge-money/index?coin=USDT')">
						{{$t('my.charge')}}
					</view>
					<view class="btn" @click="onNative('/pages/my/mention-money/index?coin=USDT')">
						{{$t('my.withdraw')}}
					</view>
				</view>
			</view>
		</view>
		<view class="tabBg">
			<view class="coinBg">
				<view class="tab">
					<view class="item active">BTC</view>
				</view>
				<view class="content-tb flexSpace" v-if="coin =='BTC'">
					<view class="left item">
						<view class="label">{{$t('my.numeracy')}}({{profitList.phs_wei}})</view>
						<view class="num">{{Number(profitList.phs)}}</view>
					</view>
					<view class="right item">
						<view class="label">{{$t('computer.income')}}({{coin}}/T)</view>
						<view class="num">{{Number(profitList.once_produce)}}</view>
						<view class="label">{{$t('my.allNumerary')}}({{profitList.total_get_wei}})</view>
						<view class="num">{{profitList.total_get?Number(profitList.total_get):'0'}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="centerIcon">
			<view class="title">
				<text></text> {{$t('my.functions')}}<text></text>
			</view>
			<view class="row two">
				<view class="col" @click="onNative('/pages/contract/transaction-record')">
					<image src="@/static/icon/order.png" mode="" class="flexIcon"></image>
					<view class="label">{{$t('order')}}</view>
				</view>
				<!-- 我的团队 -->
				<view class="col" @click="onNative('/pages/my/agency/index')"
					v-if="userInfo.partner_id == 2 || userInfo.partner_id == 3">
					<image src="@/static/icon/agency.png" mode="" class="flexIcon"></image>
					<view class="label">{{$t('my.team')}}</view>
				</view>
				<!-- 充值 -->
				<view class="col" @click="onNative('/pages/my/charge-money/index?coin=USDT')">
					<image src="@/static/icon/charge.png" mode="" class="flexIcon"></image>
					<view class="label">{{$t('yuebao.charge')}}</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="centerIcon">
			<view class="title">
				<text></text> {{$t('my.service')}} <text></text>
			</view>
			<view class="two row w50">
				<view class="col" @click="onNative('/pages/my/password/index')">
					<image src="~@/static/my/password.png" mode="" class="flexIconSmall"></image>
					<view class="text">{{$t('my.password')}}</view>
				</view>
				<view class="col" @click="onNative('/pages/my/about-us')">
					<image src="~@/static/my/about.png" mode="" class="flexIconSmall"></image>
					<view class="text">{{$t('my.aboutUs')}}</view>
				</view>
			</view>
		</view>
		<view class="model" v-if="isChange">
			<view class="content">
				<view class="title">{{$t('my.LanguageChange')}}
					<image src="@/static/my/close.png" mode="" @click="changeLange"></image>
				</view>
				<view class="subtitle">{{$t('my.LanguageMessage')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import HbHead from "@/components/hb-head";
	import {
		imageUri
	} from '@/plugin/image-url'
	import {
		menu
	} from '@/api/menu'
	import base64Code from '@/plugin/base64code.js';
	import {
		markPrice
	} from '@/api/wallet'
	import {
		Profit
	} from '@/api/profit'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			HbHead
		},
		data() {
			return {
				isAndroid: '',
				current: 0,
				coin: 'BTC'
				isChange: false,
				changeIndex: 0,
				totalAsset: '',
				profitList: {},
			}
		},
		onShow() {
			this.$store.dispatch('getUserProfileAction');
			let systemInfo = uni.getSystemInfoSync();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			this.getmarkPrice()
			this.getProfit()
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				wallet: state => state.user.wallet
			})
		},
		watch: {
			wallet() {
				this.getmarkPrice()
			}
		},
		created() {

		},
		methods: {
			getImageUrl(url) {
				return imageUri + url;
			},
			getProfit() {
				var time = Math.round(new Date().getTime() / 1000);
				var data = {
					coin: base64Code.adds(time, this.coin),
					time: time
				}
				Profit(data).then(res => {
					this.profitList = res.data
				})
			},
			getmarkPrice() {
				var time = Math.round(new Date().getTime() / 1000);
				var data = {
					coin: base64Code.adds(time, this.coin),
					time: time
				}
				markPrice(data).then(res => {
					this.uCoinPrice = res.data
				})
			},
			getTabUrl() {
				menu().then(res => {
					this.tabUrl1 = res.data[3].child[0].child
					this.tabUrl2 = res.data[3].child[1].child
				})
			},
			changeTab(e) {
				this.current = e
				this.coin = this.tab[e].coin
				this.getProfit()
			},
			onNative(url, type) {
				uni.navigateTo({
					url: url
				})
			},
		},
		onPullDownRefresh() {
			this.$store.dispatch('getUserProfileAction');
			this.getProfit()
			uni.stopPullDownRefresh()
		}
	}
</script>

<style scoped lang="scss">
	.fixed {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0rpx;
		height: 144rpx;
		background: #fff;
		/*  #ifdef  APP-PLUS  */
		padding-top: 88rpx;
		/*  #endif  */
	}

	.top {
		// padding: 40rpx 32rpx;
		padding: 20rpx 32rpx;
		background: #fff;

		.name {
			.nickname {
				font-size: 44rpx;
				color: $hb-text-black-color;
				font-family: HarmonyOS_Sans_SC_Bold;
				display: flex;
				align-items: center;

				.names {
					display: inline-block;
					font-size: 44rpx;
				}

				.user-grade1 {
					display: inline-block;
					width: 120rpx;
					height: 32rpx;
					line-height: 32rpx;
					font-size: 20rpx;
					text-align: center;
					background: linear-gradient(90deg, rgba(224, 205, 195, 1) 0%, rgba(201, 164, 138, 1) 100%);
					border-radius: 32rpx;
					margin-left: 20rpx;
					position: relative;

					&.user-grade {
						width: 120rpx;

						.box {
							width: 100%;
							font-weight: normal;
						}
					}

					.box {
						position: relative;
						width: 100rpx;
						height: 32rpx;
						line-height: 32rpx;
						font-size: 20rpx;
						text-align: center;
						color: rgba(129, 84, 71, 1);
						font-weight: bold;
					}

					.pic {
						width: 28rpx;
						height: 28rpx;
						background: url(~@/static/my/vip.png)no-repeat;
						background-size: contain;
						border-radius: 50%;
						position: absolute;
						right: 2rpx;
						top: 2rpx;
					}
				}
			}

			.id {
				font-size: 24rpx;
				color: $hb-text-gray-color;
				margin-top: 20rpx;
			}
		}

		.attr {
			display: flex;
			align-items: center;

			.tx {
				width: 104rpx;
				height: 104rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.right {
				width: 16rpx;
				height: 30rpx;
				margin-left: 20rpx;
			}

		}
	}

	.card {
		background: rgba(247, 248, 250, 1);
		color: #FFFFFF;
		padding: 40rpx 32rpx 106rpx;
		margin-top: 144rpx;
		/*  #ifdef  APP-PLUS  */
		margin-top: 160rpx;

		/*  #endif  */
		.cardAmount {
			background: url('@/static/my/mybg.png')no-repeat;
			background-size: cover;
			border-radius: 16rpx;
			padding: 40rpx 32rpx;

			.cardTop {
				align-items: start;
				padding: 10rpx 0 32rpx;

				.btn {
					width: 152rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					font-size: 32rpx;
					color: rgba(204, 172, 112, 1);
					background: #fff;
					box-shadow: 0px 4px 4px rgba(204, 169, 102, 0.6);
					overflow: hidden;
				}
			}

			.defit {
				color: rgba(128, 101, 66, 1);
				font-family: HarmonyOS_Sans_SC_Medium;


				.text {
					color: rgba(128, 101, 66, 1);
				}
			}
		}
	}

	.banlance {
		padding: 32rpx 32rpx 0;
		background: url('@/static/my/mybg1.png')no-repeat;
		background-size: cover;

		.tab {
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, .6);
			height: 56rpx;
			line-height: 56rpx;
			border-radius: 8rpx;
			margin-bottom: 20rpx;

			.item {
				width: 50%;
				text-align: center;
				font-size: 32rpx;
				color: rgba(153, 99, 75, 1);

				&.active {
					color: #fff;
					background: rgba(204, 154, 122, 1);
					border-radius: 8rpx;
				}
			}
		}

		.contents {
			// background: linear-gradient(90deg, rgba(192, 194, 206, 1) 0%, rgba(212, 214, 227, 1) 100%);
			// background: url(@/static/my/mybg2.png)no-repeat;
			// background-size: cover;
			padding: 32rpx 0;
			border-radius: 16rpx;

			// margin:32rpx auto;
			.amount {
				border-bottom: .5px solid #fff;
				padding-bottom: 10rpx;

				.item {
					padding-bottom: 24rpx;
					font-size: 24rpx;
					color: rgba(153, 99, 75, 1);

					view {
						display: inline-block;
						width: 33%;

						&:first-child {
							text-align: left;
						}

						&:nth-child(2) {
							text-align: center;
						}

						&:last-child {
							text-align: right;
						}
					}
				}
			}
		}
	}

	.flex-r {
		display: flex;
		justify-content: end;
		align-items: center;

		.btn {
			min-width: 128rpx;
			// padding:10rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			margin-left: 20rpx;
			background: #fff;
			color: rgba(220, 172, 96, 1);
			border-radius: 4rpx;
			margin-top: 24rpx;
			font-size: 28rpx;
			overflow: hidden;
			padding: 0 4rpx;
		}
	}

	.centerIcon {
		padding: 32rpx 0;

		.col {
			flex: 1;

			.label {
				padding-top: 20rpx;
				font-size: 28rpx;
				color: $hb-text-black-color;
			}
		}

		.title {
			font-size: 32rpx;
			color: $hb-text-black-color;
			text-align: center;

			text {
				display: inline-block;
				width: 80rpx;
				height: 1px;
				background: rgba(232, 233, 235, 1);
				margin: 12rpx 20rpx;
			}
		}

		.two {
			padding: 40rpx 0 10rpx;

			&.w50 {
				.col {
					width: 50%;
				}
			}

			.col {
				width: 33.3%;
				flex: none;
				margin-bottom: 40rpx;

				.text {
					color: $hb-text-color;
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
		}
	}

	.model {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, .5);

		.content {
			width: 526rpx;
			background: #fff;
			border-radius: 16rpx;
			padding: 32rpx;
			margin: 50% auto 0;
			/*  #ifdef  APP-PLUS  */
			margin: 600rpx auto 0;

			/*  #endif  */
			.title {
				font-size: 36rpx;
				color: $hb-text-black-color;
				text-align: center;
				position: relative;

				image {
					position: absolute;
					right: 0;
					top: 0;
					width: 32rpx;
					height: 32rpx;
				}
			}

			.subtitle {
				font-size: 24rpx;
				color: $hb-text-gray-color;
				text-align: center;
				margin-top: 10rpx;
			}

			.change {
				padding: 32rpx;
				// background: #4CD964;
				background: url(@/static/my/transfor.png)no-repeat;
				background-size: cover;
				border-radius: 16rpx;
				margin: 50rpx 0 10rpx;

				.item {
					width: 146rpx;
					height: 146rpx;
					border-radius: 50%;
					background: #fff;
					font-size: 28rpx;
					text-align: center;
					line-height: 146rpx;
					border: 3px solid rgba(0, 0, 0, 0);

					&.active {
						color: $hb-primary-color;
						border: 3px solid $hb-primary-color
					}
				}
			}
		}
	}

	.cardAmount {
		// width:100%;
		height: 242rpx;

		.money .num {
			text-shadow: 0px 4px 2px rgba(204, 169, 102, 1);
		}

		.aleryBanlace {
			display: flex;

			text {
				flex: 1;
				white-space: nowrap;
			}
		}
	}

	.tabBg {
		margin: 0 32rpx 32rpx;

		.coinBg {
			margin-top: -64rpx;
			height: 320rpx;
			background: url('@/static/my/myindex.png')no-repeat;
			background-size: cover;

			&.FIL {
				width: 100%;
				height: 320rpx;
				background: url('@/static/my/myFIL.png')no-repeat;
				background-size: cover;
			}

			&.BTC {
				width: 100%;
				height: 320rpx;
				background: url('@/static/my/myBTC.png')no-repeat;
				background-size: cover;
			}

			&.ETH {
				width: 100%;
				height: 320rpx;
				background: url('@/static/my/myETH.png')no-repeat;
				background-size: cover;
			}

			.tab {
				display: flex;
				align-items: center;
				line-height: 80rpx;

				.item {
					width: 33%;
					// flex: 1;
					text-align: center;
					color: rgba(220, 172, 96, 1);
					font-size: 36rpx;

					&.active {
						color: #fff;
					}
				}
			}

			.content-tb {
				align-items: center;
				color: #fff;
				padding: 20rpx 0;

				.left {
					width: 50%;
					text-align: center;
					font-size: 32rpx;

					.num {
						font-size: 48rpx;
						margin-top: 20rpx;
					}
				}

				.right {
					width: 36%;

					.label {
						font-size: 24rpx;
					}

					.num {
						font-size: 32rpx;
						padding: 15rpx 0 30rpx;
					}
				}
			}
		}
	}
</style>
